<template>
    <span class="support-ico" :class="iconCLs"></span>
</template>

<script>
    export default {
        name: 'support-ico',
        props: {
            size: {
                type: Number
            },
            type: {
                type: Number
            }
        },
        computed: {
            // 根据传入参数计算为组件绑定的iconCLs
            iconCLs() {
                const classMap = ['decrease', 'discount', 'special', 'invoice',
                'guarantee']

                // 反引号拼接，有两个类以空格分割
                return `icon-${this.size} ${classMap[this.type]}`
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import "~common/stylus/mixin"

    /* 基础样式 */
    .support-ico
        display: inline-block
        background-repeat: no-repeat

     // 先按不同size区分 再区分不同类型
    .icon-1
        /* 基础样式 */
        width: 12px
        height: 12px
        background-size: 12px 12px
        /* 区分类型 */
        &.decrease
            /* cube-ui提供的属性 第一个参数为图片url 第二个参数为文件类型（默认为png） */
            /* 自动做@3x与@2x的适配 */
            bg-image('images/decrease_1')
        &.discount
            bg-image('images/discount_1')
        &.guarantee
            bg-image('images/guarantee_1')
        &.invoice
            bg-image('images/invoice_1')
        &.special
            bg-image('images/special_1')

    .icon-2
        /* 基础样式 */
        width: 16px
        height: 16px
        background-size: 16px 16px
        /* 区分类型 */
        &.decrease
            bg-image('images/decrease_2')
        &.discount
            bg-image('images/discount_2')
        &.guarantee
            bg-image('images/guarantee_2')
        &.invoice
            bg-image('images/invoice_2')
        &.special
            bg-image('images/special_2')

    .icon-3
        /* 基础样式 */
        width: 12px
        height: 12px
        background-size: 12px 12px
        /* 区分类型 */
        &.decrease
            bg-image('images/decrease_3')
        &.discount
            bg-image('images/discount_3')
        &.guarantee
            bg-image('images/guarantee_3')
        &.invoice
            bg-image('images/invoice_3')
        &.special
            bg-image('images/special_3')

    .icon-4
        /* 基础样式 */
        width: 16px
        height: 16px
        background-size: 16px 16px
        /* 区分类型 */
        &.decrease
            bg-image('images/decrease_4')
        &.discount
            bg-image('images/discount_4')
        &.guarantee
            bg-image('images/guarantee_4')
        &.invoice
            bg-image('images/invoice_4')
        &.special
            bg-image('images/special_4')

</style>
